<template>
	<div class="box" v-loading="loading">
		<el-row class="title">
			<el-col :span="item.span" v-for="(item, index) in colList" :key="index">
				<div>{{ item.name }}</div>
			</el-col>
		</el-row>
		<el-row class="title" v-for="(item, index) in dataList" :key="index">
			<!-- 数据 -->
			<el-col :span="3">
				<div>{{ item.label }}</div>
			</el-col>
			<el-col :span="4">
				<div>
					<el-input
						size="mini"
						v-model="item.fissionNum"
						:min="0"
						:max="9999999"
						:ref="'input-' + index + 1"
						@keyup.native="keyHandle"
						@focus="focusHandle(index + '' + 1)"
						:disabled="!isSelf"
					></el-input>
				</div>
			</el-col>
			<el-col :span="3">
				<div :style="{ color: item.fansNum - item.yesFansNum >= 0 ? '' : 'red' }">
					{{ item.fissionNum - item.yesFissionNum }}
				</div>
			</el-col>
			<el-col :span="4">
				<div>
					<el-input
						size="mini"
						v-model="item.fansNum"
						controls-position="right"
						:min="0"
						:max="9999999"
						:ref="'input-' + index + 2"
						@keyup.native="keyHandle"
						@focus="focusHandle(index + '' + 2)"
						:disabled="!isSelf"
					></el-input>
				</div>
			</el-col>
			<el-col :span="3">
				<div :style="{ color: item.fansNum - item.yesFansNum >= 0 ? '' : 'red' }">
					{{ item.fansNum - item.yesFansNum }}
				</div>
			</el-col>
			<el-col :span="4">
				<div>
					<el-input
						size="mini"
						v-model="item.aTypeNum"
						controls-position="right"
						:min="0"
						:max="9999999"
						:ref="'input-' + index + 3"
						@keyup.native="keyHandle"
						@focus="focusHandle(index + '' + 3)"
						:disabled="!isSelf"
					></el-input>
				</div>
			</el-col>
			<el-col :span="3">
				<div :style="{ color: item.aTypeNum - item.yesATypeNum >= 0 ? '' : 'red' }">
					{{ item.aTypeNum - item.yesATypeNum }}
				</div>
			</el-col>
		</el-row>
		<div class="empty" v-if="dataList.length == 0">暂无数据</div>
		<el-row>
			<el-col :span="24">
				总计：微信个数：
				<span class="number">{{ count.wxNum }}</span>
				今日裂变总数：
				<span class="number">{{ count.fissionAll }}</span>
				新增裂变人数：
				<span class="number">{{ count.newFissionAll }}</span>
			</el-col>
			<el-col :span="24">
				粉丝总数：
				<span class="number">{{ count.fansAll }}</span>
				新增粉丝：
				<span class="number">{{ count.fansAll - count.yesfansAll }}</span> A类总数：
				<span class="number">{{ count.aTypeAll }}</span> 新增A类数：
				<span class="number">{{ count.aTypeAll - count.yesaTypeAll }}</span>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		return {
			colList: [
				{
					name: '微信编号',
					span: 3
				},
				{
					name: '今日裂变总数',
					span: 4
				},
				{
					name: '新增裂变人数',
					span: 3
				},
				{
					name: '今日粉丝数总数',
					span: 4
				},
				{
					name: '新增粉丝数',
					span: 3
				},
				{
					name: '今日A类总数',
					span: 4
				},
				{
					name: '新增A类数',
					span: 3
				}
			],
			dataList: [],
			timer: '',
			currentFocus: '', //当前编辑的input
			loading: true
		};
	},
	props: {
		times: [String, Date],
		userId: {
			type: [String, Number],
			default: ''
		},
		isSelf: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		count() {
			let count = {
				wxNum: this.dataList.length,
				fissionAll: 0,
				newFissionAll: 0,
				fansAll: 0,
				aTypeAll: 0,
				yesfansAll: 0,
				yesaTypeAll: 0
			};
			this.dataList.forEach(item => {
				count.fissionAll += parseInt(item.fissionNum) ? parseInt(item.fissionNum) : 0;
				count.newFissionAll +=
					(parseInt(item.fissionNum) ? parseInt(item.fissionNum) : 0) -
					(parseInt(item.yesFissionNum) ? parseInt(item.yesFissionNum) : 0);
				count.fansAll += parseInt(item.fansNum) ? parseInt(item.fansNum) : 0;
				count.aTypeAll += parseInt(item.aTypeNum) ? parseInt(item.aTypeNum) : 0;
				count.yesfansAll += parseInt(item.yesFansNum) ? parseInt(item.yesFansNum) : 0;
				count.yesaTypeAll += parseInt(item.yesATypeNum) ? parseInt(item.yesATypeNum) : 0;
			});

			return count;
		}
	},
	watch: {
		dataList: {
			handler: function(val) {
				val = val.map(item => {
					return {
						...item,
						newFissionNum: item.fissionNum - item.yesFissionNum
					};
				});
				this.$emit('resolt', JSON.stringify(val));
			},
			deep: true
		},
		/* eslint-disable */
		times(val) {
			if (!this.timer) {
				this.timer = setTimeout(() => {
					this.getWxInfo();
				}, 300);
			} else {
				this.timer = clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.getWxInfo();
				}, 300);
			}
		}
	},
	methods: {
		focusHandle(val) {
			this.currentFocus = val;
		},
		keyHandle(event) {
			if (
				event.keyCode !== 37 &&
				event.keyCode !== 39 &&
				event.keyCode !== 38 &&
				event.keyCode !== 40 &&
				event.keyCode !== 13
			)
				return false;
			this.moveFocus(event.keyCode);
		},
		moveFocus(val) {
			let focus = this.changeStr(this.currentFocus, val);
			if (focus) {
				this.currentFocus = focus;
			} else {
				return false;
			}
			this.$refs[`input-${this.currentFocus}`][0].focus();
		},
		// 改变focus
		changeStr(str, val) {
			let last = str[str.length - 1]; // 最后一个位
			str = Number(str.substring(0, str.length - 1));
			let sum = this.dataList.length - 1;
			if (val === 38 || val === 40) {
				//上下按键
				if (val === 40) {
					if (str === sum && last === '3') {
						return '01';
					} else if (str === sum) {
						return false;
					}
					str++;
				} else {
					if (str === 0) return sum + '' + 1; // 如果第一行按向上键，直接跳转到最后一行
					str--;
				}
				return (str = str + last);
			} else if (val === 37 || val === 39) {
				//左右按键
				if (val === 39) {
					if (last === '3' && str < sum) {
						last = '1';
						str++;
					} else if (last === '3' && str == sum) {
						return '01';
					} else {
						last++;
					}
				} else {
					if (last === '1' && str > 0) {
						str--;
						last = '3';
					} else if (last === '1' && str == 0) {
						return sum + '1';
					} else {
						last--;
					}
				}
				return (str = str + '' + last);
			} else {
				//enter按键
				if (last === '3') {
					if (str === sum) return '01'; //最后一个，就返回到第一个
					str++;
					last = '1';
				} else {
					last++;
				}
				return (str = str + '' + last);
			}
		},
		getWxInfo() {
			this.$service.reproing.staffdaily
				.wechatList({
					page: 1,
					size: 20,
					time: this.times,
					userId: this.userId
				})
				.then(res => {
					this.dataList = res ? res : [];
					this.loading = false;
				})
				.catch(err => console.error(err));
		}
	}
};
</script>
<style lang="stylus" scoped>
.box {
	max-height 400px;
	overflow-y scroll
}
.title {
    border-bottom solid .5px rgba(0,0,0,0.2);
    text-align center
    padding 5px 0
}
.empty {
	text-align center;
	height 50px;
	line-height 50px;
	color #cccccc
}
.el-input-number--mini {
	width 95%
}
.number {
	color: red;
    margin-right: 20px;
}
</style>
